﻿<UserControl
    x:Class="ScreenMonkey.Remote.SMClipSelect"
    x:Name="ClipSelect"
    
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ScreenMonkey.Remote"
    
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    
    mc:Ignorable="d" 
    d:DesignHeight="303" d:DesignWidth="481" >

    <UserControl.Resources>
        <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="/ScreenMonkey.Remote;component/Themes/Generic.xaml" />
        <ResourceDictionary Source="/ScreenMonkey.Remote;component/ResourceDictionaries/ScrollBarDictionary.xaml" />
        </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>


    </UserControl.Resources>

    <DockPanel>

        <DockPanel  
            Margin="4,4,4,4" 
            DockPanel.Dock="Top">

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="128*"/>
                    <ColumnDefinition Width="84*" />
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <!-- Clear Layers -->
                <Border 
                    x:Name="clearLayer"  
                    Grid.Column="0"
                    Margin="5"
                    HorizontalAlignment="Right"
                    BorderThickness="3" 
                    BorderBrush="DarkRed" 
                    CornerRadius="3" 
                    Padding="3" 
                    Width="60"
                    Height="60"
                    PreviewMouseDown="clearLayer_PreviewMouseDown">

                    <Border>
                        <Border.Background>
                            <ImageBrush 
                            ImageSource="/ScreenMonkey.Remote;component/Resources/SM-Clear.png"
                            AlignmentX="Center" 
                            AlignmentY="Center" />
                        </Border.Background>

                        <Label
                            Content="Clear"
                            Foreground="Yellow"
                            FontWeight="Bold"
                            VerticalAlignment="Bottom" 
                            HorizontalAlignment="Center" />

                    </Border>
                </Border>

                <!-- Page Select -->
                <Button 
                    x:Name="buttonPageSelect"
                    Background="Transparent"
                    Foreground="Yellow"
                    BorderBrush="Yellow"
                    BorderThickness="30"
                    
                    Grid.Column="1"
                    Style="{StaticResource ButtonNormalStyle}"
                    MinWidth="200"
                    MinHeight="60"
                    Content="{Binding ElementName=ClipSelect, Path=PageName}"
                    Click="buttonPageSelect_Click" Grid.ColumnSpan="2" Margin="0,8">
                </Button>

                <Border
                    x:Name="referenceBorder"
                    Grid.Column="3"
                    CornerRadius="2"
                    Margin="5"
                    BorderBrush="DarkGray"
                    BorderThickness="1"
                    VerticalAlignment="Center"
                    MaxWidth="500"
                    MinHeight="60">

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="1*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <Label
                            Grid.Column="0"
                            Content="Volume"
                            FontWeight="Bold" 
                            Foreground="Yellow"
                            VerticalAlignment="Center"
                            HorizontalContentAlignment="Right">
                        </Label>

                        <Slider
                            x:Name="sliderVolume"
                            Grid.Column="1"
                            Foreground="DarkGray"
                            Interval="1" 
                            SmallChange="1" 
                            LargeChange="10" 
                            Maximum="100" 
                            TickFrequency="5" 
                            TickPlacement="Both"
                            VerticalAlignment="Center" HorizontalAlignment="Left" Width="75" ValueChanged="sliderVolume_ValueChanged">

                            <Slider.Style>
                                <Style>
                                    <Setter Property="Slider.LayoutTransform">
                                        <Setter.Value>
                                            <TransformGroup>
                                                <ScaleTransform ScaleX="1.5" ScaleY="1.5" />
                                            </TransformGroup>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Slider.Style>

                        </Slider>

                        <Label
                            Grid.Column="3"
                            Width="35"
                            Foreground="Yellow"
                            Content="{Binding ElementName=sliderVolume, Path=Value,  
                                              Converter={local:StringFormatConverter}, 
                                              ConverterParameter='{}{0:###,0}'}" 
 
                            FontWeight="Bold"
                            HorizontalContentAlignment="Left"
                            VerticalAlignment="Center">
                        </Label>

                    </Grid>
                </Border>

                

            </Grid>

        </DockPanel>

        <ItemsControl 
            x:Name="clipList" 
            ItemsSource="{Binding ElementName=ClipSelect, Path=Clips}"
            MouseDown="clipList_MouseDown" 
            PreviewMouseDown="clipList_PreviewMouseDown"  
            Visibility="Visible"
            HorizontalAlignment="Stretch"
            >

            <ItemsControl.Template>
                <ControlTemplate TargetType="ItemsControl">
                    <Border>
                        <ScrollViewer
                            Style="{StaticResource SmScrollViewer}"
                            Foreground="Yellow"
                            Background="Black"
                            >
                                <ItemsPresenter/>                          
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </ItemsControl.Template>

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel FlowDirection="LeftToRight"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border
                        x:Name="clipBorder"
                        BorderThickness="8"
                        CornerRadius="3"
                        Width="150"
                        Height="150"
                        Margin="2.5">

                        <Border.Background>
                            <ImageBrush ImageSource="{Binding Path=Thumbnail}"/>
                        </Border.Background>

                        <DockPanel 
                            HorizontalAlignment="Stretch" 
                            VerticalAlignment="Stretch">

                            <TextBlock 
                                DockPanel.Dock="Bottom" 
                                Background="#99000000" 
                                Height="50"
                                Foreground="Yellow"
                                FontWeight="Bold"
                                TextAlignment="Center"
                                Text="{Binding Path=Legend}" 
                                Padding="2" 
                                TextWrapping="Wrap" />

                            <Image/>

                            <Canvas 
                                x:Name="pauseIcon" 
                                Width="40" 
                                Height="40"
                                HorizontalAlignment="Right"
                                DockPanel.Dock="Right">

                                <Rectangle 
                                    Width="10" 
                                    Height="30" 
                                    Fill="Yellow"/>

                                <Rectangle 
                                    Canvas.Left="20"  
                                    Width="10" 
                                    Height="30" 
                                    Fill="Yellow"/>

                                <Canvas.Style>
                                    <Style TargetType="Canvas">
                                        <Setter Property="Visibility" Value="Collapsed" />

                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=PlayState}" Value="Paused">
                                                <Setter Property="Canvas.Visibility" Value="Visible"/>
                                            </DataTrigger>
                                        </Style.Triggers>

                                    </Style>
                                </Canvas.Style>
                            </Canvas>

                            <Canvas 
                                x:Name="playIcon" 
                                Width="40" 
                                Height="40"
                                HorizontalAlignment="Right"
                                DockPanel.Dock="Right">

                                <Polygon 
                                    Points="0,0 2,0 30,15 2,30 0,30"
                                    Stroke="Yellow"
                                    Fill="Yellow"/>

                                <Canvas.Style>
                                    <Style TargetType="Canvas">
                                        <Setter Property="Visibility" Value="Collapsed" />

                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=PlayState}" Value="Playing">
                                                <Setter Property="Canvas.Visibility" Value="Visible"/>
                                            </DataTrigger>
                                        </Style.Triggers>

                                    </Style>
                                </Canvas.Style>
                            </Canvas>

                            <Canvas 
                                x:Name="stopIcon" 
                                Width="40" 
                                Height="40" 
                                HorizontalAlignment="Right"
                                DockPanel.Dock="Right">

                                <Rectangle 
                                    Width="30" 
                                    Height="30" 
                                    Fill="Yellow"/>

                                <Canvas.Style>
                                    <Style TargetType="Canvas">
                                        <Setter Property="Visibility" Value="Collapsed" />

                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=PlayState}" Value="Finished">
                                                <Setter Property="Canvas.Visibility" Value="Visible"/>
                                            </DataTrigger>
                                        </Style.Triggers>

                                    </Style>
                                </Canvas.Style>
                            </Canvas>

                        </DockPanel>

                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="BorderBrush" Value="#FF000040" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=PlayState}" Value="Stopped">
                                        <Setter Property="Border.BorderBrush" Value="DarkRed"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=PlayState}" Value="Playing">
                                        <Setter Property="Border.BorderBrush" Value="Yellow"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=PlayState}" Value="Paused">
                                        <Setter Property="Border.BorderBrush" Value="Yellow"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>

                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        <ItemsControl 
            x:Name="pageList" 
            ItemsSource="{Binding ElementName=ClipSelect, Path=Pages}" 
            Visibility="Collapsed" 
            PreviewMouseDown="pageList_PreviewMouseDown">

            <ItemsControl.Template>
                <ControlTemplate TargetType="ItemsControl">
                    <Border>
                        <ScrollViewer>
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </ItemsControl.Template>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border
                        BorderThickness="4"
                        BorderBrush="DarkRed"
                        CornerRadius="3"
                        Width="300"
                        Height="100"
                        Margin="2.5"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center">

                        <DockPanel 
                            Background="Black">

                            <Border
                                CornerRadius="3"
                                Width="100"
                                Margin="5"
                                BorderThickness="2"
                                DockPanel.Dock="Left"
                                BorderBrush="#FF222222">

                                <Border.Background>
                                    <ImageBrush 
                                        ImageSource="{Binding Path=Thumbnail}" 
                                        AlignmentX="Center" 
                                        AlignmentY="Center" />
                                </Border.Background>
                            </Border>

                            <TextBlock 
                                DockPanel.Dock="Bottom" 
                                VerticalAlignment="Center"
                                HorizontalAlignment="Stretch"                           
                                Foreground="Yellow"
                                FontWeight="Bold"
                                TextAlignment="Center"
                                Text="{Binding Path=Legend}" Padding="2" />

                        </DockPanel>

                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>

    </DockPanel>
</UserControl>
